<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>添加新地址</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="$!webPath/resources/app/mcjd/css/common_jmc.css"/>
    <link rel="stylesheet" type="text/css" href="$!webPath/resources/app/mcjd/css/jmc_icon.css"/>
    <link rel="stylesheet" type="text/css" href="$!webPath/resources/app/mcjd/css/jmc_ufm.css"/>

    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        window._URI_ = {
            IP0: '$!mallBaseurl', // 本地
            IP1: 'http://testmall.yijiahn.com/mall' // 开发环境
        }
        window._URL_ = {
            addAddress: _URI_.IP0 + '/app/user/address/save.json', // 新增地址
            addressList: _URI_.IP0 + '/app/mcjd/addressList.htm', //地址列表
            area: _URI_.IP0 + '/app/common/area/tree.json', //省市县
            street: _URI_.IP0 + '/app/common/street/tree.json' //街道
        };
    </script>
</head>
<body style="background:#fafafa;">

    <div id="bxTopbar">
        <div class="bx_topbar">
            <div class="h_44"></div>
            <div class="wp_topbar">
                <div class="it_btn it_back_btn" onclick="javascript:history.back(-1);"><i class="icon ico_1"></i></div>
                <a id="btnAddrSure" class="it_btn it_sure_btn" href="javascript:;">确定</a>
                <div class="it_toptt">添加新地址</div>
            </div>
        </div>
    </div>

    <div class="bx-addrfm">
        <div class="wp-addrfm">
            <ul class="ul_0 bg_fff ft30">
                <li class="li_0 li_0_t">
                    <div class="li_c">
                        <input type="text" placeholder="姓名" id="t_name"/>
                    </div>
                </li>
                <li class="li_0 li_0_t">
                    <div class="li_c">
                        <input type="number" placeholder="联系电话" pattern="[0-9]*" id="t_phone"/>
                    </div>
                </li>
                <li class="li_0 li_0_select">
                    <div class="li_c li_c_select" id="selectAddr">
                        <span class="t_select_placeholder">所在地区</span>
                    </div><input id="v_selectAddr" type="hidden" />
                    <div class="li_r li_r_ico"></div>
                </li>
                <li class="li_0 li_0_select">
                    <div class="li_c li_c_select" id="selectStreet">
                        <span class="t_select_placeholder">街道</span>
                    </div><input id="v_selectStreet" type="hidden" />
                    <div class="li_r li_r_ico"></div>
                </li>
                <li class="li_0 li_0_t">
                    <div class="li_c">
                        <input type="text" placeholder="请填写详情地址，精确至门牌号等" id="t_addr"/>
                    </div>
                </li>
            </ul>
        </div>

        <div class="wp-setdefault">
            <div id="btnSetDefault" class="btn_setdefault">设置为默认地址</div>
        </div>
    </div>

    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/touch.min.js"></script>
    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/utils.js"></script>
    <link rel="stylesheet" type="text/css" href="$!webPath/resources/app/mcjd/js/LArea.css"/>
    <script type="text/javascript" src="$!webPath/resources/app/mcjd/js/L_Select.js"></script>
    <script>
        $(function() {
        	var _accessToken = "$!accessToken",_orgId="$!orgId",_goodsCartIds="$!goodsCartIds",_addressId="$!addressId";

            function getArea(){
            	$.ajax({
                    type: "POST",
                    dataType: "json",
                    timeout: 5000,
                    url: _URL_.area,
                    headers: {},
                    data: {
                    },
                    success: function(res) {
                        if ("100" === res.code) { //请求成功
                            $('#selectCity').attr({'dflag': '1'});
                            setTimeout(function() {
                                area1.upDate(res.data);
                            }, 150);
                        } else if ("401" === res.code) { //App端请求，需要登录
                            Utils.showToast("请登录后再操作！");
                        } else if ("405" === res.code) { //微信端请求，需要登录
                            Utils.showToast("请先微信授权后再操作！");
                            WxUtils.goWxPage(window.location.href, 1000);
                        } else {
                            console.log('请求出错');
                            Utils.showToast(res.code + ":" + res.msg || '请求出错');
                        }
                    },
                    error: function(xhr) {
                        $('.overlay__bg').hide(0);
                        console.log('请求出错');
                        var msg = "请求出错(请检查相关网络状况)";
                        Utils.showToast(msg);
                    }
                });
            }
            function getStreet(areaId){
            	$.ajax({
                    type: "POST",
                    dataType: "json",
                    timeout: 5000,
                    url: _URL_.street,
                    headers: {},
                    data: {
                    	countyId: areaId
                    },
                    success: function(res) {
                        if ("100" === res.code) { //请求成功
                            $('#selectStreet').attr({'dflag': '1'});
                            setTimeout(function() {
                                area2.upDate(res.data.list);
                            }, 150);
                        } else if ("401" === res.code) { //App端请求，需要登录
                            Utils.showToast("请登录后再操作！");
                        } else if ("405" === res.code) { //微信端请求，需要登录
                            Utils.showToast("请先微信授权后再操作！");
                            WxUtils.goWxPage(window.location.href, 1000);
                        } else {
                            console.log('请求出错: ' + _URL_.goodsDetailById);
                            Utils.showToast(res.code + ":" + res.msg || '请求出错');
                        }
                    },
                    error: function(xhr) {
                        $('.overlay__bg').hide(0);
                        console.log('请求出错: ' + _URL_.goodsDetailById);
                        var msg = "请求出错(请检查相关网络状况)";
                        Utils.showToast(msg);
                    }
                });
            };
            
            var cityId = null;
            var area1 = new LSelect();
            var area2 = new LSelect();
            area1.init({
                'trigger': '#selectAddr',
                'valueTo': '#v_selectAddr',
                'type': 1,
                'keys': {
                    id: 'areaId', name: 'areaName'
                },
                'data': [],
                callbackFn: function(res) {
                    if((res.t || res.v) && '1' != $('#selectStreet').attr('dflag1')) {
                        $('#selectStreet').attr({'dflag1': '1'});
                        area2.init({
                            'trigger': '#selectStreet',
                            'valueTo': '#v_selectStreet',
                            'type': 1,
                            'ncol': 1,
                            'keys': {
                                id: 'areaId', name: 'areaName'
                            },
                            'data': [],
                            callbackFn: function(res) {
                                console.log(res)
                            }
                        });
                    };
                    if(cityId == res.v) {
                        return false;
                    };
                    cityId = res.v;
                    area2.upDate([]);
                    $('#selectStreet').attr({'dflag': '0'}).html('<span class="t_select_placeholder">请选择所在街道</span>');
                    $('#v_selectStreet').val('');
                }
            });
            $('#selectAddr').click(function() {
                if('1' == $(this).attr('dflag')) {
                    return false;
                };
                getArea();
            });
            $('#selectStreet').click(function() {
                var _cityId = $('#v_selectAddr').val();
                if(_cityId){
                	_cityId = _cityId.split(",")[2];
                }
                if(!_cityId) {
                    Utils.showToast("请先选择您所在地区");
                    return false;
                }
                if('1' == $(this).attr('dflag') && _cityId == cityId) {
                    return false;
                };
                cityId = _cityId;
                getStreet(cityId);
            });

            // 设置默认
            $('#btnSetDefault').on('tap', function(e) {
                if($(this).hasClass('s__checked')) {
                    $(this).removeClass('s__checked');
                }else  {
                    $(this).addClass('s__checked');
                }
            });
            // 确定
            $('#btnAddrSure').on('click', function(e) {
                var t_name = $('#t_name').val();
                var t_phone = $('#t_phone').val();
                var t_addr = $('#t_addr').val();
                var selectAddr = $('#selectAddr').val();
                var v_selectAddr = $('#v_selectAddr').val(); // 下拉选项 selectAddr、v_selectAddr都不为空才可以
                var selectStreet = $('#selectStreet').val();
                var v_selectStreet = $('#v_selectStreet').val(); // 下拉选项 selectStreet、v_selectStreet都不为空才可以
                
                var is_radio = 0;  // 是否默认地址（true 为选中默认地址）
                if($('#btnSetDefault').hasClass('s__checked')) {
                    is_radio = 1;
                }
                
                // 提交
                $('.overlay__bg').show(0);
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    timeout: 5000,
                    url: _URL_.addAddress,
                    headers: {},
                    data: {
                    	accessToken: _accessToken,
                    	receiverName: t_name,
                    	mobile: t_phone,
                    	detailAddress: t_addr,
                    	countyId: "",
                    	addressId: "",
                    	streetId: v_selectStreet,
                    	isdefault: is_radio,
                    	orgShipfree: 0,
                    	servicestationId: ""
                    },
                    success: function(res) {
                        $('.overlay__bg').hide(0);
                        if ("100" === res.code) { //请求成功
                        	history.back(-1);
                        } else if ("401" === res.code) { //App端请求，需要登录
                            Utils.showToast("请登录后再操作！");
                        } else if ("405" === res.code) { //微信端请求，需要登录
                            Utils.showToast("请先微信授权后再操作！");
                            WxUtils.goWxPage(window.location.href, 1000);
                        } else {
                            console.log('请求出错: ' + _URL_.goodsDetailById);
                            Utils.showToast(res.code + ":" + res.msg || '请求出错');
                        }
                    },
                    error: function(xhr) {
                        $('.overlay__bg').hide(0);
                        console.log('请求出错: ' + _URL_.goodsDetailById);
                        var msg = "请求出错(请检查相关网络状况)";
                        Utils.showToast(msg);
                    }
                });
            });
        })
    </script>

</body>
</html>